<template>
  <Form ref="formValidate" :model="formValidate" inline :label-width="80">
    <FormItem label="时间">
      <FormItem prop="fromTime">
        <DatePicker type="date" placeholder="请选择" v-model="formValidate.fromTime"></DatePicker>
      </FormItem>
      <span style="padding: 0 10px 0 0">-</span>
      <FormItem prop="endTime">
        <DatePicker type="date" placeholder="请选择" v-model="formValidate.endTime"></DatePicker>
      </FormItem>
    </FormItem>
    <FormItem :label-width="10">
      <Button @click="handleSearch" type="primary" style="marginRight: 20px; width: 70px">查询</Button><Button type="primary" style="width: 70px" @click="handleReset" icon="icon-gengxin">重置</Button>
    </FormItem>
  </Form>
</template>

<script>
export default {
  props: {
    onSearch: {
      type: Function,
      default: () => { }
    },
    onReset: {
      type: Function,
      default: () => { }
    },
  },
  data() {
    return {
      formValidate: {
        fromTime: null,
        endTime: null
      }
    }
  },
  methods: {
    handleSearch() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
            this.onSearch(this.formValidate);
        } else {
            this.$Message.error('Fail!');
        }
      })
    },
    handleReset() {
      this.$refs['formValidate'].resetFields();
      this.onReset();
    }
  }
}
</script>

<style>

</style>